<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>登陆</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:image" content="favicon.png"/>
    <link rel='stylesheet' href='https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css'>
    <link rel="shortcut icon" href="static/favicon.png" type="image/x-icon">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"
            type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/language/zh_CN.js"
            type="text/javascript"></script>
</head>
<body style=" background: url(http://global.bing.com/az/hprichbg/rb/RavenWolf_EN-US4433795745_1920x1080.jpg) no-repeat center center fixed; background-size: 100%;">
<div class="modal-dialog" style="width: 450px;margin: 100px auto;">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title text-center">请登陆</h3>
        </div>
        <form role="form" action="login" method="post">
            <div class="modal-body">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-phone"></span>
                        </span>
                        <input type="text" class="form-control" name="username"
                               placeholder="请输入用户名" onkeyup="this.value=this.value.replace(/\s/g,'')"
                               onafterpaste="this.value=this.value.replace(/\s/g,'')">
                        <span class="glyphicon form-control-feedback"></span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-lock"></span>
                        </span>
                        <input type="password" class="form-control" name="password"
                               placeholder="密码" onkeyup="this.value=this.value.replace(/\s/g,'')"
                               onafterpaste="this.value=this.value.replace(/\D/g,'')">
                        <span class="glyphicon form-control-feedback"></span>
                    </div>
                </div>
                <div class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-picture"></span>
                        </span>
                            <input type="text" name="captcha" class="form-control" placeholder="请输入验证码">
                        </div>
                    </div>
                    <div class="form-group col-sm-offset-1" style="vertical-align: top;margin-top: 6px;">
                        <img src="captcha" height="36" onclick="changeImage()"
                             style="cursor:pointer;margin-top: 0;">
                    </div>
                </div>
                <div class="form-group">
                    <div class="checkbox">
                        &nbsp;&nbsp;
                        <label>
                            <input type="checkbox" value="1" name="rememberMe"/> 记住我
                        </label>
                        &nbsp;&nbsp;
                        <b style="color:red;" th:text="${error}"></b>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary" style="width: 100%;">登录</button>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-default" style="width: 100%;">注册</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    function changeImage() {
        $("img").attr('src', 'captcha' + "?" + new Date().getTime());
    }

    $(function () {
        $("input[name='username']").focus();
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 2,
                            max: 40,
                            message: '用户名长度必须在2到40之间'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_.]+$/,
                            message: '密码只能包含大写、小写、数字小数点和下划线'
                        },
                        stringLength: {
                            min: 1,
                            max: 40,
                            message: '长度必须在1到40之间'
                        }
                    }
                },
                captcha: {
                    validators: {
                        notEmpty: {
                            message: '验证码不能为空'
                        }
                    }
                }
            }
        });
    });
</script>
</body>
</html>
